<template>
  <div class="container">
    <div class="about-box flexCol Xcenter">
      <div class="title">关于我们</div>
      <div class="content">About us</div>
    </div>
    <div class="tabs flexRow Xcenter">
      <el-tabs v-model="activeTab">
        <el-tab-pane label="关于我们" name="1"></el-tab-pane>
        <el-tab-pane label="联系我们" name="2"></el-tab-pane>
        <el-tab-pane label="意见反馈" name="3"></el-tab-pane>
      </el-tabs>
    </div>
    <div class="content-box w1420">
      <div v-show="activeTab == 1">
        <div class="title">关于我们</div>
        <div class="content-part">
          <el-divider content-position="left">
            <span class="divider-text">关于我们</span>
          </el-divider>
          <div class="other">
            <div class="part" v-html="aboutInfo.about_us"></div>
          </div>
          <!-- <div class="pic flexWarp Xbetween">
            <img class="big-img" src="../assets/img/about-img1.png" alt />
            <img class="big-img" src="../assets/img/about-img2.png" alt />
            <img class="big-img" src="../assets/img/about-img3.png" alt />
            <img class="big-img" src="../assets/img/about-img4.png" alt />
            <img class="small-img" src="../assets/img/about-img5.png" alt />
            <img class="small-img" src="../assets/img/about-img6.png" alt />
            <img class="small-img" src="../assets/img/about-img7.png" alt />
            <img class="small-img" src="../assets/img/about-img8.png" alt />
          </div> -->
        </div>
      </div>
      <div v-show="activeTab == 2">
        <div class="title">联系我们</div>
        <div class="content-part">
          <el-divider content-position="left">
            <span class="divider-text">联系我们</span>
          </el-divider>
          <div class="contact">
            <el-form label-position="left" label-width="116px">
              <el-form-item label="微信：">{{
                contactInfo.wechart
              }}</el-form-item>
              <el-form-item label="客服电话：">
                {{ contactInfo.phone_400 }} 、{{ contactInfo.phone }}
              </el-form-item>
              <el-form-item label="官方邮箱：">{{
                contactInfo.email
              }}</el-form-item>
              <el-form-item label="地址：">
                {{ contactInfo.address }}
              </el-form-item>
            </el-form>
            <img :src="contactInfo.address_img" alt />
          </div>
        </div>
      </div>
      <div v-show="activeTab == 3">
        <div class="title">意见反馈</div>
        <div class="content-part">
          <el-divider content-position="left">
            <span class="divider-text">意见反馈</span>
          </el-divider>
          <div class="tips">
            {{ aboutInfo.feedback }}
          </div>
          <div class="form">
            <el-form
              ref="form"
              label-position="top"
              :model="formObj"
              :rules="rules"
            >
              <el-form-item label="请详细描述您的问题或建议" prop="content">
                <el-input
                  v-model="formObj.content"
                  type="textarea"
                  placeholder="请输入您的问题或建议~"
                  rows="9"
                  maxlength="300"
                  show-word-limit
                >
                </el-input>
              </el-form-item>
              <el-form-item label="联系方式" prop="phone">
                <el-input
                  v-model="formObj.phone"
                  placeholder="请输入您的联系方式"
                  clearable
                >
                </el-input>
              </el-form-item>
              <el-form-item label="截图" prop="image">
                <Upload
                  :fileList.sync="formObj.image"
                  :beforeUploadFun="beforeUploadFun"
                />
                <div class="tips">最多上传9张，图片300kb以内。</div>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="submit">提交</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </div>

    <el-dialog width="600px" :visible.sync="dialogVisible">
      <div class="modal">
        <img src="../assets/img/success-icon.png" alt />
        <div>提交成功!</div>
        <p>您的意见反馈已提交成功！</p>
        <p>稍后会有客服联系您，请保持电话畅通~</p>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { aboutMe, contactUs, feedback } from '../api/about'
import Upload from '../components/upload'
export default {
  components: { Upload },
  data() {
    return {
      activeTab: '1',
      aboutInfo: {},
      contactInfo: {},
      formObj: {
        title: 1,
        username: '',
        phone: '',
        content: '',
        image: []
      },
      rules: {
        phone: [{ required: true, message: '请输入联系方式', trigger: 'blur' }],
        content: [
          { required: true, message: '请输入问题或者建议', trigger: 'blur' }
        ],
        image: [
          {
            type: 'array',
            required: true,
            message: '请上传截图',
            trigger: 'change'
          }
        ]
      },
      dialogVisible: false
    }
  },
  computed: {
    userInfo: {
      get() {
        return this.$store.getters.userInfo
      }
    }
  },
  mounted() {
    this.getAboutMe()
    this.getContactUs()
  },
  methods: {
    // 获取关于我们
    getAboutMe() {
      aboutMe({}).then((res) => {
        this.aboutInfo = res.data
      })
    },
    // 获取联系我们
    getContactUs() {
      contactUs({}).then((res) => {
        this.contactInfo = res.data
      })
    },
    beforeUploadFun(file) {
      let isJPG = false
      if (
        file.type == 'image/jpeg' ||
        file.type == 'image/png' ||
        file.type == 'image/gif'
      ) {
        isJPG = true
      }
      const isLt300KB = file.size / 1024 < 300
      if (!isJPG) {
        this.$message.error('上传图片只能是 JPG/PNG/GIF 格式!')
        return isJPG
      }
      if (!isLt300KB) {
        this.$message.error('上传图片大小不能超过 300KB!')
        return isLt300KB
      }
      return true
    },
    // 提交
    submit() {
      if (JSON.stringify(this.userInfo) != '{}') {
        this.$refs.form.validate((valid) => {
          if (valid) {
            let urlList = []
            this.formObj.image.forEach((item) => {
              urlList.push(item.url)
            })
            this.formObj.image = urlList.join(',')
            this.formObj.username = this.userInfo.nickname
            feedback(this.formObj).then(() => {
              this.dialogVisible = true
            })
          }
        })
      } else {
        // 呼出登录弹框
        this.$store.dispatch('settings/changeSetting', {
          key: 'loginDialogFormVisible',
          value: true
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  background: #eff1f4;
  padding-bottom: 120px;
}
.about-box {
  width: 100%;
  height: 400px;
  background: url('../assets/img/about-bg.png') no-repeat center center;
  background-size: cover;
  padding-left: 249px;
  box-sizing: border-box;
  color: #ffffff;
  .title {
    font-size: 48px;
    font-weight: 500;
    margin-bottom: 15px;
  }
  .content {
    font-size: 28px;
  }
}
.tabs {
  background-color: #ffffff;

  /**样式重置 */
  /deep/ {
    .el-tabs__nav-wrap::after {
      background-color: transparent;
    }
    .el-tabs__header {
      margin: 0;
    }
    .el-tabs__item {
      height: 100px;
      line-height: 100px;
      font-size: 24px;
      padding: 0 80px;
    }
    .el-tabs__active-bar {
      height: 6px;
    }
  }
}
.content-box {
  padding-top: 40px;
  .title {
    font-size: 20px;
    color: #333333;
    margin-bottom: 40px;
  }
  .content-part {
    background-color: #ffffff;
    padding: 100px;
    .el-divider__text {
      padding-left: 0;
      padding-right: 34px;
      left: 0;
    }
    .divider-text {
      font-size: 32px;
      color: #3385ff;
    }
    & > .other {
      margin-top: 90px;
      .part {
        margin-bottom: 30px;
        /deep/ p {
          color: #666666;
          font-size: 24px;
          line-height: 40px;
        }
      }
    }
    & > .contact {
      margin-top: 90px;
      /deep/ .el-form {
        .el-form-item__label {
          color: #262626;
          font-size: 22px;
          padding: 0;
        }
        .el-form-item__content {
          color: #666666;
          font-size: 22px;
        }
      }
      img {
        width: 1220px;
        height: 700px;
        margin-top: 48px;
      }
    }
    .pic {
      .big-img {
        width: 596px;
        height: 400px;
        margin-top: 28px;
      }
      .small-img {
        width: 284px;
        height: 284px;
        margin-top: 28px;
      }
    }
    & > .tips {
      margin-top: 90px;
      margin-bottom: 78px;
      width: 959px;
      font-size: 22px;
      color: #333333;
      line-height: 40px;
    }
    .form {
      /deep/ .el-form {
        .el-form-item {
          margin-bottom: 80px;
        }
        .el-form-item__label {
          color: #262626;
          font-size: 22px;
          padding-bottom: 40px;
        }
        .el-textarea {
          color: #666666;
          font-size: 22px;
          .el-input__count {
            font-size: 22px;
          }
        }
        .el-input__inner {
          height: 80px;
          font-size: 22px;
        }
        .el-icon-plus {
          color: #cccccc;
          font-size: 100px;
          line-height: 148px;
        }
        .el-button {
          padding: 16px 66px;
          font-size: 24px;
        }
      }
      .tips {
        font-size: 18px;
        color: #999999;
      }
    }
  }
}
/**样式重置 */
/deep/ {
  .el-dialog {
    border-radius: 10px;
  }
  .el-dialog__header {
    padding: 0;
  }
  .el-dialog__body {
    padding: 0;
  }
  .el-dialog__headerbtn {
    font-size: 22px;
    top: -32px;
    right: 0;
    .el-dialog__close {
      color: #ffffff;
    }
  }
}
.modal {
  padding: 68px 0;
  text-align: center;
  img {
    width: 100px;
    height: 100px;
  }
  div {
    font-size: 22px;
    color: #3385ff;
    margin: 30px 0 20px;
  }
  p {
    font-size: 18px;
    color: #999999;
    line-height: 30px;
  }
}
</style>